<template>
	<view>
		<view @click="clickLogin">通过代码方法实现跳转页面</view>
		<navigator url="/pages/login/login">通过组组件的方式跳转</navigator>
		<view @click="showMsg">显示消息框</view>
		<view @click="showErrMsg('error')">显示错误消息框</view>
		<view @click="showErrMsg('fail')">显示失败消息框</view>
		<view @click="showErrMsg('exception')">显示异常消息框</view>
		<view @click="showErrMsg('none')">显示不显示消息框</view>
		<view @click="showErrMsg('loading')">显示加载消息框</view>
		<view @click="showLoad">显示一直加载的消息框</view>
		<view @click="showDialog">显示对话框</view>
		<view @click="clickTab">演示跳转到tab页面</view>
		<view @click="back">返回上一个页面</view>
		<navigator url="/pages/video/video">跳转到视频页面</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			clickLogin() {

				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			clickTab() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			showMsg() {
				uni.showToast({
					title: "点击成功"
				})
			},
			showErrMsg(icon) {
				console.log('当前的icon值是', icon)
				uni.showToast({
					title: '错误消息框',
					icon: icon
				})
			},
			showLoad() {
				uni.showLoading({
					title: '登录中'
				})
				//延时2秒执行
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
			},
			showDialog() {
				uni.showModal({
					title: "小标题",
					content: '这是内容这是内容',
					confirmText: '退出',
					confirmColor: '#39B54A',
					showCancel: true,
					editable: true,
					success(res) {
						console.log("输入框的内容为", res.content)
						if (res.confirm) {
							console.log("用户点击了确定按钮")
						}
						if (res.cancel) {
							console.log("用户点击了取消按钮")
						}
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			goVideo(){
				
			}
		}
	}
</script>

<style>
	view {
		padding: 16rpx;
	}
</style>